<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>光伏发电与脱贫攻坚</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.10.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.10.0/mapbox-gl.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
    <script src="https://d3js.org/d3.v6.min.js"></script> <!-- 引入d3.js -->
    <style>
        .donut-chart path {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        .donut-chart:hover path {
            opacity: 1;
        }
        .left-container{
            
            height: 70%;
            width: 90%;
            
            
        }
        .main-container{
            display: flex;
            
            justify-content: space-between;
            width: 90%;
            height: 100%;
            background-color:#f7f7f760;
            
        }
       
        .right-container{
            position: absolute;
            right: 0;
            width: 40%;
            height: 60%;
           

        }
        #pie-svg{
            margin-top: 100px;
        }
        #map { 
            z-index: 5;
             position: absolute;
            width: 100%; height: 60%; }
        
        .popup .mapboxgl-popup-content{
            opacity: 0.5;
            border-radius: 12px;
            font-size: 12px;
            background-color:whitesmoke
        }
        .popup .mapboxgl-popup-tip {
            display: none;
        }
       
        .bottom-container{
            position: absolute;
            top: 65%;
            right: 5%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 90%;
            height: 30%;
        }
        
        #legend {
    position: fixed;
    width: 10%;
    top:1%;
    left:8px;
    background: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-size: 10px;
    line-height: 18px;
    z-index: 1000;
}


#legend h4 {
    margin: 0 0 5px;
    font-size: 14px;
}
#legend div {
    display: flex;
    align-items: center;
    margin-bottom: 5px;

}
#legend span {
    display: inline-block;
    width: 10%;
    height: 15px;
    margin-right: 5px;
    border-radius: 3px;
}
#villagelegend {
    position: absolute;
    width: 8%;
    top: 10px;
    right: 5px;
    height: 28%;
    background: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-size: 10px;
    line-height: 18px;
    z-index: 1000;
}


#villagelegend h4 {
    margin: 0 0 5px;
    font-size: 14px;
}
#villagelegend div {
    display: flex;
    align-items: center;
    margin-bottom: 5px;

}
#villagelegend span {
    display: inline-block;
    width: 10%;
    
    height: 15px;
    margin-right: 5px;
    border-radius: 3px;
}
#Solarlegend {
    position: absolute;
    width: 8%;
    height: 28%;
    right:5px;
    top: 30%;
    background: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-size: 10px;
    line-height: 18px;
    z-index: 1000;
}


#Solarlegend h4 {
    margin: 0 0 5px;
    font-size: 14px;
}
#Solarlegend div {
    display: flex;
    align-items: center;
    margin-top: 5px;

}
#Solarlegend span {
    display: inline-block;
    width: 10%;
    height: 15px;
    margin-right: 5px;
    border-radius: 3px;
}



    </style>
</head>
<body>

<div class="main-container">

    <div id="legend" class="legend1">
        <h4>贫困原因图例</h4>
        <div><span style="background-color: #FF9999;"></span> 因丧</div>
        <div><span style="background-color: #66B3FF;"></span> 因婚</div>
        <div><span style="background-color: #99FF99;"></span> 因学</div>
        <div><span style="background-color: #FFCC99;"></span> 因残</div>
        <div><span style="background-color: #FF9966;"></span> 因灾</div>
        <div><span style="background-color: #66FF66;"></span> 因病</div>
        <div><span style="background-color: #FF66CC;"></span> 缺劳力</div>
        <div><span style="background-color: #FF6699;"></span> 缺土地</div>
        <div><span style="background-color: #CC99FF;"></span> 缺技术</div>
        <div><span style="background-color: #CCCCFF;"></span> 缺水</div>
        <div><span style="background-color: #99CCFF;"></span> 缺资金</div>
        <div><span style="background-color: #FFCCFF;"></span> 自身发展动力不足</div>
        <div><span style="background-color: #E0E0E0;"></span> 其他</div>
    </div>
    <div id="legend" class="legend2">
        <h4>收入类型图例</h4>
        <div><span style="background-color: #FF9999;"></span> 工资性收入</div>
        <div><span style="background-color: #66B3FF;"></span> 公益性岗位收入</div>
        <div><span style="background-color: #99FF99;"></span> 其他工资性收入</div>
        <div><span style="background-color: #FFCC99;"></span> 财产性收入(合计)</div>
        <div><span style="background-color: #FF9966;"></span> 转移性收入</div>
        <div><span style="background-color: #66FF66;"></span> 生产经营性收入(合计)</div>
        
        
    </div>
    <div class="leftLegend">
    <div id="villagelegend" class="legend3">
        <h4>人均纯收入（元）</h4>
        
        <div><span style="background-color: #326db6;"></span> 20000</div>
        <div><span style="background-color: #75b5dc;"></span> 22000</div>
        <div><span style="background-color: #e8edf1;"></span> 24000</div>
        <div><span style="background-color: #eabaa1;"></span> 26000</div>
        <div><span style="background-color: #d16d5b;"></span> 28000</div>
        <div><span style="background-color: #b7282e;"></span> 30000</div>
        <h5>大小由村落总人数决定</h6>
        
    </div>
    <div id="Solarlegend" class="legend3">
        <h4>电站总投资（万元）</h4>
        
        <div><span style="background-color: #cbead1;"></span> 40</div>
        <div><span style="background-color: #a8e087;"></span> 80</div>
        <div><span style="background-color: #73c088;"></span> 120</div>
        <div><span style="background-color: #397d54;"></span> 160</div>
        <div><span style="background-color: #235d3a;"></span> 200</div>
        <div><span style="background-color: #252525;"></span> 240</div>
        <h5>大小由电站总发电量决定</h6>
        
    </div>
    </div>
    <button id="toggleDataButton" style="position: absolute; top: 10px; left: 15%; z-index: 10;">切换数据</button>
    <div id="map"></div>


<div class="bottom-container">
    <svg id="line-svg" class="line-svg"></svg>
</div>
</div>

<script src="js/map.js"></script>
<script src="js/solarFarm.js"></script>
<script src="js/village.js"></script>
<script src="js/tiao.js"></script>
<script src="js/line.js"></script>
<script src="js/bar.js"></script>

</body>
</html>
